<template>
    <div>
        <div style="float: right;margin-bottom: 10px;">
            <el-button @click="$refs.ruleCreate.init()" type="primary">新建</el-button>
        </div>
        <el-table
                v-loading="loading"
                :data="rules"
                border
                stripe
                style="width: 100%">
            <el-table-column label="顺序" width="50">
                <template slot-scope="scope">
                    {{scope.$index+1}}
                </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="100"></el-table-column>
            <el-table-column label="详情">
                <template slot-scope="scope">
                    <div class="detail">
                        <p v-for="item in scope.row.details">{{item.detail}}</p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="created_at" label="创建时间" width="150"></el-table-column>
            <el-table-column prop="updated_at" label="修改时间" width="150"></el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button type="text" @click="$refs.ruleEdit.init(scope.row)">编辑</el-button>
                    <el-button type="text" @click="deleteRule(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <rule-create-dialog ref="ruleCreate" @refresh="refresh"></rule-create-dialog>
        <rule-edit-dialog ref="ruleEdit" @refresh="refresh"></rule-edit-dialog>
    </div>
</template>

<script>
    import RuleCreateDialog from "./Dialog/RuleCreateDialog";
    import RuleEditDialog from "./Dialog/RuleEditDialog";
    import {mapState} from 'vuex';
    export default {
        name: "Rules",
        computed:{
            ...mapState(['common']),
        },
        components:{
            RuleCreateDialog,
            RuleEditDialog,
        },
        data(){
            return {
                rules:[],
                loading:false,
            }
        },
        mounted(){
            this.refresh();
        },
        methods:{
            refresh(){
                let that = this;
                this.loading = true;
                that.post('/api/activity/rules/list',{}).then(result=> {
                    that.loading = false;
                    that.rules = result.data;
                }).catch(e=>{
                    console.log(e);
                    that.$message.error('加载异常');
                    that.loading = false;
                })
            },
            deleteRule(id){
                let that = this;
                that.post('/api/activity/rules/delete',{id:id}).then(result=> {
                    if(result.code === 0){
                        that.$message.success(result.msg);
                        that.refresh();
                    }else{
                        that.$message.error(result.msg);
                        that.refresh();
                    }
                }).catch(e=>{
                    console.log(e);
                    this.$message.error('请求异常');
                })

            },
        }
    }
</script>

<style scoped>
.detail>p{
    margin: 0;
}
</style>
